<template>
    <div class="box">
        <h5>路由缓存和路由守卫</h5>
    </div>
</template>

<script>
export default {
    // 组件内路由进去前守卫
    beforeRouteEnter(to,from,next){
        // to:将要访问的路由信息对象副本
        // from:切换前正处于激活状态的路由信息对象副本

        // next:控制当守卫被执行时，是否允许继续执行后续的路由切换操作
        //         当next函数被调用时，表示可以继续执行路由切换
        //         当next函数未被调用或调用时执行next(false)规则，表示不可以继续执行路由切换
        //         当next函数被调用时传入和 router-link 一样的to属性取值，可以更改路由切换路径
        console.log("beforeRouteEnter-to:",to);
        console.log("beforeRouteEnter-from:",from);
        next();
        // next(false)
    },
    // 组件内路由更新守卫
    // 监控当前组件对应的路由在激活状态下的参数变化
    beforeRouteUpdate:function(to,from,next) {
        console.log("beforeRouteUpdate");
        next();
    },
    // 组件离开前守卫
    beforeRouteLeave(to,from,next){
        console.log("组件离开前守卫");
        let flag = confirm("是否离开当前页面")
        if(flag){
            next()
        }else{
            next(false)
        }
    },
    beforeCreate(){
        console.log("RouterFive被创建");
    },
    destroyed(){
        console.log("RouterFive被销毁");
    }
}
</script>

<style scoped>
.box{
    min-height: 400px;
    border: 4px dashed #ccc;
}
</style>